<template>
	<view class="m-waterfall">
		<view class="left">
			<goods-item v-for="goods in leftList" :key="goods.id" :info="goods" :proStyle="proStyle" />
		</view>
		<view class="right">
			<goods-item v-for="goods in rightList" :key="goods.id" :info="goods" :proStyle="proStyle"  />
		</view>
	</view>
</template>

<script>
	import { getProducts, getProductSearch } from '@/api/home.js';
	import goodsItem from '@/components/MyWaterfall/goodsItem.vue';
	export default {
		data() {
			return {
				baseUrl: this.IMG_BASE_URL
			}
		},
		props: {
			list: {
				type: Array,
				default: () => {}
			},
			proStyle: {
				type: Object,
				default: () => {}
			},
		},
		components: {
			goodsItem
		},
		computed: {
			leftList: function() {
				if(this.list.length) {
					return this.list.filter((item, index) => {
						return index % 2 === 0
					})
				}
				return [];
			},
			rightList: function() {
				if(this.list.length) {
					return this.list.filter((item, index) => {
						return index % 2 > 0
					})
				}
				return []
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.m-waterfall {
		display: flex;
		width: 750rpx;
		padding: 20rpx;
		box-sizing: border-box;
		justify-content: space-between;

		.left {
			display: inline-flex;
			width: 350rpx;
			flex-wrap: wrap;
			align-content: flex-start;
			justify-content: center;
		}

		.right {
			display: inline-flex;
			width: 350rpx;
			flex-wrap: wrap;
			align-content: flex-start;
			justify-content: center;
		}
	}
</style>